<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视差速度</title>
    <style>
      @import url(https://fonts.googleapis.com/css?family=Amatic + SC:400, 700);
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        font-family: 'Amatic SC', cursive;
      }
      .block {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        font-size: 16px;
      }
      .block h2 {
        position: relative;
        display: block;
        text-align: center;
        margin: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10vw;
        color: white;
        font-weight: 400;
      }
      .img-parallax {
        width: 100vmax;
        z-index: -1;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        pointer-events: none;
      }
    </style>
</head>
<body>
  <div class="block">
    <img
            src="http://www.lixianglong.cn/bg_store/img/travel/slider-1.jpg"
            data-speed="-2"
            class="img-parallax"
    />
    <h2>视差速度 -2</h2>
  </div>
  <div class="block">
    <img
            src="http://www.lixianglong.cn/bg_store/img/travel/slider-2.jpg"
            data-speed="2"
            class="img-parallax"
    />
    <h2>视差速度 2</h2>
  </div>
  <div class="block">
    <img
            src="http://www.lixianglong.cn/bg_store/img/travel/slider-3.jpg"
            data-speed="-1.25"
            class="img-parallax"
    />
    <h2>视差速度 -1.25</h2>
  </div>
  <div class="block">
    <img
            src="http://www.lixianglong.cn/bg_store/img/travel/slider-4.jpg"
            data-speed="1.25"
            class="img-parallax"
    />
    <h2>视差速度 1.25</h2>
  </div>
  <div class="block">
    <img
            src="http://www.lixianglong.cn/bg_store/img/travel/image-13.jpg"
            data-speed="-1.75"
            class="img-parallax"
    />
    <h2>视差速度 -1.75</h2>
  </div>
  <div class="block">
    <img
            src="http://www.lixianglong.cn/bg_store/img/travel/image-8.jpg"
            data-speed="1.75"
            class="img-parallax"
    />
    <h2>视差速度 1.75</h2>
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
  // 循环获取每一个图片元素
  $('.img-parallax').each(function () {
    var img = $(this)
    var imgParent = $(this).parent()
    function parallaxImg() {
      var speed = img.data('speed') // 获取每张图片设置了的偏移速度
      var imgY = imgParent.offset().top // 获取图片盒子所在的Y位置
      var winY = $(this).scrollTop() // 获取当前滑动到的位置
      var winH = $(this).height() // 获取浏览器窗口高度
      var parentH = imgParent.innerHeight() // 获取图片盒子的内高度

      // 浏览器窗口底部的所在位置
      var winBottom = winY + winH

      // 当前图片是否进入浏览器窗口
      if (winBottom > imgY && winY < imgY + parentH) {
        // 运算图片需要开始移动的位置
        var imgBottom = (winBottom - imgY) * speed
        // 运算出图片需要停止移动的位置
        var imgTop = winH + parentH
        // 获取从开始移动到结束移动的%（根据开始与结束像素 + 移动速度）
        var imgPercent = (imgBottom / imgTop) * 100 + (50 - speed * 50)
      }
      img.css({
        top: imgPercent + '%',
        transform: 'translate(-50%, -' + imgPercent + '%)',
      })
    }
    $(document).on({
      scroll: function () {
        parallaxImg()
      },
      ready: function () {
        parallaxImg()
      },
    })
  })
</script>
</html>
<!--实现理论-->
<!--首先讲一下排版，因为我们需要在我们滑动页面的时候使用 JavaScript 偏移图片，所以我们需要给图片一个 CSS 属性让我们可以让图片可以根据一个速度来往上或者往下移动。这个例子里面我们让所有图片包裹在一个div里面，class名为block。这个div给予相对定位属性position: relative，这个时候我们就可以在里面加入图片，然后让图片绝对定位position: absolute在这个div盒子里面。-->
<!--但是图片是可能很大的，我们需要把图片不超出我们定义个盒子，所以我们的div同时也给予了overflow: hidden和一个高度height: 100%。这样图片超出div盒子就会被隐藏。-->
